<template>
    <ul class="todo-main" @mouseleave="mouseIndex=-1">
      <li v-for="todo,index in todoList" :key="todo.id" @mouseenter="mouseIndex=index"
      :class="{active:index === mouseIndex}"
      >
        <label>
          <input type="checkbox" :checked="todo.done" @click="emit('singleChecked',index)"/>
          <span>{{todo.thing}}</span>
        </label>
        <button class="btn btn-danger"  @click="emit('deleteSingle',index)">删除</button>
      </li>
    </ul>
  </template>
  
  <script lang="ts">
  import { defineComponent, onMounted, ref } from "vue";
  
  export default defineComponent({
    name: "Content",
  });
  </script>
  
  <script setup lang="ts">
  import type { todoListType } from "../../App";
  //不做类型限制接收props的方式（不推荐）
  // defineProps(["todoList"]);
  //可以限制类型的接收props的方式（推荐）
  //defineProps方法返回一个对象，对象包含所有接收的props值，但是在模板中可以直接使用接收props值即可
  const props = defineProps<{
    //限制类型并确定接收的props
    todoList: todoListType;
  }>();


  const emit = defineEmits<{
    (event: "singleChecked", index:number):void;
    (event: "deleteSingle", index:number):void;
  }>()
  
  onMounted(() => {
    console.log(props.todoList);
  });

//1. 设置一个保存鼠标所在列表的下标
 const mouseIndex = ref(-1)
  </script>
  
  <style scoped lang="scss">
  /*main*/
  .todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
  }
  
  .todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
  }
  /*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }
  
  li label {
    float: left;
    cursor: pointer;
  }
  
  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  
  li button {
    float: right;
    display: none;
    margin-top: 3px;
  }
  
  li:before {
    content: initial;
  }
  
  li:last-child {
    border-bottom: none;
  }
  .active{
    background-color: #ccc;
    button{
        display: block;
    }
  }
  </style>
  